<template>
  <div class="form-view-row base-address-view">
    <label>{{ field.displayName }}</label>
    <div class="form-view-row-content" @click="openMap">
      <i v-if="displayMap" class="iconfont icon-address"></i>
      <span>{{ value | fmt_address }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "form-product-complete-address-view",
  props: {
    field: {
      type: Object,
      default: () => ({}),
    },
    value: Object,
  },
  computed: {
    displayMap() {
      let value = this.value;
      if (!value) return false;
      return ![
        value.adProvince,
        value.adCity,
        value.adDist,
        value.adAddress,
        value.province,
        value.city,
        value.dist,
        value.address,
      ].every((s) => !s);
    },
  },
  methods: {
    openMap() {
      this.$fast.map
        .display(this.value, { title: this.field.displayName })
        .catch((err) => console.error("openMap catch an err: ", err));
    },
  },
};
</script>

<style lang="scss">
.base-address-view {
  i.iconfont {
    @include fontColor();
    cursor: pointer;
    font-size: 14px;
  }
  .form-view-row-content {
    cursor: pointer;
  }
  .form-view-row-content:hover {
    color: $color-primary-light-6;
  }
}
</style>
